import stypes from "./category.less"
import { useEffect } from "react"
import { useDispatch, useSelector, ArticleModelState, Link } from "umi"

export default function CategoryPage() {
  let dispatch = useDispatch(),
    { articleCategory } = useSelector((state: { article: ArticleModelState }) => state.article)

  useEffect(() => {
    dispatch({
      type: "article/getArticleCatrgory"
    })
  }, [])

  return (
    <div className={stypes.category}>
      <div className={stypes.top}><span>文章分类</span></div>
      <ul>
        {articleCategory.map((item, index) => (
          <li key={index}>
            <Link to="/">
              <span>{item.label}</span>
              <span>共计{item.articleCount}篇文章</span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}